<script setup>
import { useTheme } from 'vuetify'
import ScrollToTop from '@core/components/ScrollToTop.vue'
import initCore from '@core/initCore'
import {
  initConfigStore,
  useConfigStore,
} from '@core/stores/config'
import { hexToRgb } from '@core/utils/colorConverter'

const { global } = useTheme()

// ℹ️ Sync current theme with initial loader theme
initCore()
initConfigStore()

const configStore = useConfigStore()
</script>

<template>
  <VLocaleProvider :rtl="configStore.isAppRTL">
    <!-- ℹ️ This is required to set the background color of active nav link based on currently active global theme's primary -->
    <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
      <RouterView />
      <ScrollToTop />
    </VApp>
  </VLocaleProvider>
</template>
<style lang="scss">
.mypagination {
  display: flex;
  justify-content: end;
}

.v-data-table-footer {
  visibility: hidden !important;
  height: 0 !important;
}

.el-pagination__sizes,
.btn-prev,
.el-pager,
.number,
.btn-quicknext,
.btn-next {
  background-color: rgb(var(--v-theme-surface)) !important;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.el-date-editor .el-input__inner {
  background-color: rgb(var(--v-theme-surface));
  font-size: 13px !important;
}

.el-input__prefix {
  display: none;
  background-color: rgb(var(--v-theme-surface));
}

.el-input__wrapper {
  padding-block: 0;
  padding-inline: 2px;
}
</style>
